<!--
 @description 自定义导航-分类
 @fileName Category.vue
 @author zengqiongying
 @created 2023/09/07 15:47:56
-->
<template>
  <div class="custom-category-page">
    <MineHeader :title="pageTitle" arrow />
    <div ref="tabs" class="cate-tabs">
      <ScrollTab
        v-if="navList.length>0"
        v-model="tabConfId"
        :list="navList"
        value-key="id"
        label-key="tabName"
      />
    </div>
    <div v-if="customPageDetail && customPageDetail.id " class="page-main-container">
      <CustomPage
        v-if="!isSpuShow"
        is-inline
        :off-top="fixedHeight"
        :page-detail="customPageDetail"
      />
      <NavFilter v-else ref="navFilter" immediate-refresh :off-top="fixedHeight">
        <Product :sku-codes="skuCodes" is-custom-spu />
      </NavFilter>
    </div>
  </div>
</template>

<script>
import { getTabTree, saveDefineNavigationBrowsingHistory } from '@/apis/index'
import MineHeader from '@/components/MineHeader'
import ScrollTab from '@/components/ScrollTab'
import CustomPage from '@/views/customPage/index'

import NavFilter from '@/components/NavFilter'
import Product from '@/views/product/finished'
import commonMixin from '../customPage/mixin'
export default {
  name: 'DefineTabCategory',
  components: { MineHeader, ScrollTab, CustomPage, NavFilter, Product },
  mixins: [commonMixin],
  data() {
    return {
      defineId: this.$route.params.id, // 类型定义ID
      pageTitle: this.$route.query.title || '', // 页面标题
      fixedHeight: 100, // 固定区域高度
      navList: [],
      tabConfId: '', // 配置id
      isSpuShow: false, // 是否shangp SKU展示
      customPageDetail: {}, // 自定义页面详情
      skuCodes: [], // SKUP商品查询前需先查询所有sku编码
      brownHistoryId: ''
    }
  },
  computed: {
    cusPageId() {
      const obj = this.navList.find(v => v.id === this.tabConfId)
      return (obj && obj.gotoValue) || ''
    }
  },
  watch: {
    cusPageId(v) {
      this.getCusPageDetail(v)
    }
  },
  created() {
    this.getNavList()
  },
  activated() {

  },
  mounted() {
    this.$nextTick(() => {
      const rect = this.$refs.tabs.getBoundingClientRect()
      this.fixedHeight = rect.height + 44
    })
  },
  methods: {
    getNavList() {
      if (!this.defineId) return
      getTabTree(this.defineId).then(res => {
        this.navList = res.data || []
        if (this.navList.length > 0) {
          this.tabConfId = this.navList[0].id
        }
        if (this.brownHistoryId !== this.defineId) {
          this.setBrowsingHistory({ id: this.defineId })
        }
      })
    },
    // 保存浏览记录
    setBrowsingHistory({ id, name }) {
      if (!id) return
      const params = { tabDefineId: id, tabDefineName: name, type: 2 }
      saveDefineNavigationBrowsingHistory(params).then(res => {
        this.brownHistoryId = id
      })
    },
    // 查询自定义页面详情：获取页面类型判断：组合页，商品页
    getCusPageDetail(id) {
      if (!id) return
      this.pageId = id
      this.getCustomPageContent(false, (data) => {
        this.customPageDetail = data
        const floorList = data ? data.v2FloorList || [] : []
        const pageType = (data && data.type) || ''
        if (pageType === 'product') {
          // 商品展示类型
          if (floorList.length > 0) {
            const tmpObj = floorList[0]
            if (tmpObj.showType === 'SPU') {
              // 商品展示-SPU展示，则获取skuCode
              this.isSpuShow = true
              this.getProductSkuCode(data)
              return
            }
          }
        }
        this.isSpuShow = false
      })
    }
  }
}

</script>
<style lang='less' scoped>
.custom-category-page{
  padding-top: 44PX;
  .cate-tabs{
    position: fixed;
    top: 44PX;
    left: 0;
    right: 0;
    height: 60px;
    padding: 12px 0 16px 0;
    background: #fff;
    box-sizing: border-box;
    z-index: 9;
    border-bottom: 2px solid #F5F6F7;
  }
  .page-main-container{
    padding-top: 60px;
  }
}
</style>
